import { useNoteStore } from "@/state/Stores";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
} from "reactstrap";
import { useIntParam } from "taehui-ts/fe-utilities";

export default function SrcInput() {
  const { setLastSrc, setWantAvatar } = useNoteStore();
  const [isSrcOpened, setSrcOpened] = useState(false);
  const { param: src, setParam: setSrc } = useIntParam("src", 0);

  const t = useTranslations();

  const onInput = (src: number) => () => {
    setSrc(src);
  };

  useEffect(() => {
    setLastSrc(src);
  }, [setLastSrc, src]);

  return (
    <Dropdown
      isOpen={isSrcOpened}
      toggle={() => {
        setSrcOpened((prevState) => !prevState);
      }}
    >
      <DropdownToggle caret>{t(`toSrc${src}`)}</DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={onInput(0)}>{t("toSrc0")}</DropdownItem>
        <DropdownItem onClick={onInput(1)}>{t("toSrc1")}</DropdownItem>
        <DropdownItem onClick={onInput(2)}>{t("toSrc2")}</DropdownItem>
        <DropdownItem onClick={onInput(3)}>{t("toSrc3")}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}